<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>图案样式</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    function draw() {
        var ctx = canvas.getContext('2d');
        // 创建新 image 对象，用作图案
        var img = new Image();
        img.src = "";
        img.onload = function () {
            // 创建图案
            // Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
            var ptrn = ctx.createPattern(img, 'repeat');
            ctx.fillStyle = ptrn;
            ctx.fillRect(0, 0, 290, 150);

        }
    }

    draw();
</script>
</body>
</html>